<template>
  <el-select :disabled="disabled" :multiple="multiple" v-model="id" placeholder="请选择行业" filterable>
    <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id" />
  </el-select>
</template>
<script lang="ts" setup>
 import {ref,watch,onMounted} from 'vue'
 import {GetExampleIndustrys} from '@/api/example'
  const props = defineProps({
    modelValue: {
      type: Number,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    }
  })
  const id = ref<number>(props.modelValue)
  interface Emits { //定义事件
      (e: 'update:modelValue', value: any): void
  }
  const emit = defineEmits<Emits>()
  watch(()=>id.value,() =>{
      emit('update:modelValue', id.value)
  })
  watch(()=>props.modelValue,() =>{
    id.value = props.modelValue
  })
  const list = ref<CategoryInfo[]>([])
  const name = ref<string>('')
  onMounted( () => {
    GetExampleIndustrys(name.value).then((res:ServiceResponse<CategoryInfo[]>) => {
      if(res.success)
        list.value = res.data ?? []
    })
  })
</script>